<template>
  <header class="header">
    <div class="l-content">
      <el-button
        type="primary"
        icon="el-icon-menu"
        style="margin-right: 25px;"
        @click="collapseMenu"
      ></el-button>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="current.path" v-if="current">
          {{ current.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" @command="setDialogInfo">
        <span class="el-dropdown-link">
          管理员<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="info">个人中心</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>
<script>
import { mapState } from "vuex";
import { logout } from "../api/login";
export default {
  computed: {
    ...mapState({
      current: state => state.tab.currentMenu
    })
  },
  methods: {
    //控制左侧菜单是否折叠
    collapseMenu() {
      this.$store.commit("collapseMenu");
    },
    // 下拉框选择，点击个人信息后调整到对应的函数执行
    setDialogInfo(comItem) {
      switch (comItem) {
        case "info":
          this.showInfoList();
          break;
        case "logout":
          this.logout();
          break;
      }
    },
    //展示个人信息
    showInfoList() {
      this.$alert(
        `<div>
	            名称：admin
	            <br/>
	            身份：管理员
	          </div>`,
        "个人名片",
        {
          dangerouslyUseHTMLString: true
        }
      );
    },
    logout() {
      let that = this;
      this.$confirm("确定退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          logout().then(resp => {
            if (resp.data.code == "200") {
              that.$store.commit("delToken");
              sessionStorage.removeItem("token");
              this.$message.success(resp.data);
              setTimeout(() => {
                //返回登陆页
                this.$router.push("/");
              }, 1000);
            } else {
              this.$message.error(resp.data);
            }
          });
        })
        .catch(() => {
          return;
        });
    }
  }
};
</script>
<style scoped>
.header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.l-content {
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.el-dropdown {
  color: #fff;
}
.el-breadcrumb /deep/ .el-breadcrumb__inner {
  color: #fff !important;
}
.el-breadcrumb__inner a {
  color: #fff !important;
}
</style>
